<!--region 封装的table table-->
<template>
	<div class="table table-height">
		<el-table
      v-loading="options.loading"
      :data="list"
      :stripe="options.stripe"
      :ref="options.tableRef"
      @selection-change="handleSelectionChange"
      border
    >
			<!--region 选择框-->
			<el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
			</el-table-column>
			<!--endregion-->
			<!--region 数据列-->
			<template v-for="(column, index) in Object.keys(columns)">
				<el-table-column
          v-if="column!=='id'"
          :prop="column"
          :key='column'
          :label="columns[column].showName"
          :align="columns[column].align"
          :minWidth="columns[column].minWidth || '100px'"
          :width="columns[column].width"
          :show-overflow-tooltip="columns[column].ftype!=='image'"
        >
					<template slot-scope="scope">
						<template v-if="!columns[column].render">
              <!-- 时间 -->
							<template v-if="columns[column].ftype==='dateTime'">
								<span>{{scope.row[column] | parseTime}}</span>
							</template>
              <!-- 颜色 -->
							<template v-else-if="columns[column].ftype==='color'">
								<span class="color-box" :style="{'background': scope.row[column]}"></span>
							</template>
              <!-- 图片 -->
							<template v-else-if="columns[column].ftype==='image'">
								<el-image
                  v-if="scope.row[column]"
                  style="width: 80px; height: 80px"
                  :src="scope.row[column].split('@!#!@')[0]"
                  :preview-src-list="scope.row[column].split('@!#!@')"
                />
							</template>
              <!-- 文件 -->
              <template v-else-if="columns[column].ftype==='file'">
                <div>{{scope.row[column].split(`@=#=@`)[0]}}</div>
              </template>
              <!-- 其他 -->
							<template v-else>
								<span>{{scope.row[column]}}</span>
							</template>
						</template>
						<template v-else>
							<expand-dom
                :column="columns[column]"
                :row="scope.row"
                :render="columns[column].render"
                :index="index"
              />
						</template>
					</template>
				</el-table-column>
			</template>
      <!--endregion-->
      <!--region 操作栏-->
			<el-table-column label="操作" align="center" width="200">
        <template slot-scope="{row}">
          <template v-for="(item, key) in row.operateItems">
            <el-button
              :key="key"
              v-if="key!=='delete'"
              type="text"
              @click="editDrive(item, row.id)"
            >{{item.showName}}</el-button>
            <el-button
              :key="key"
              v-else
              type="text"
              @click="deleteItem(item, row.id)"
            >{{item.showName}}</el-button>
          </template>
        </template>
			</el-table-column>
			<!--endregion-->
		</el-table>
	</div>
</template>

<script>
import { driveDelete, driveCommon } from '@/api/drive'
export default {
  name: 'hy-table',
  props: {
    // 数据列表
    list: {
      type: Array,
      default() {
        return []
      }
    },
    // 需要展示的列
    columns: {
      type: Object,
      default() {
        return {}
      }
    },
    // table 表格的控制参数
    options: {
      type: Object,
      default() {
        return {
          tableRef: 'mutipleTable',
          stripe: false, // 是否为斑马纹 table
          highlightCurrentRow: false // 是否要高亮当前行
        }
      }
    }
  },
  // 组件
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index
        }
        if (ctx.props.column) params.column = ctx.props.column
        return ctx.props.render(h, params)
      }
    }
  },
  // 数据
  data() {
    return {
      pageIndex: 1,
      multipleSelection: [] // 多行选中
    }
  },
  methods: {
    // 编辑
    async editDrive(item, id) {
      const { goTo, url } = item
      if (goTo) {
        this.modalForm(driveCommon(`${url}`, {}, true), { ...item, id}).then(() => {
          this.$emit('onQuery')
        })
      } else {
        this.$router.push(url)
      }
    },
    // 删除
    deleteItem({module, model}, id) {
      this.$confirm(`请确认是否要删除该数据?`, { type: 'warning' }).then(() => {
        driveDelete(module, model, id).then(() => {
          this.$message.success('删除成功')
          this.$emit('onQuery')
        })
      })
    },
    // 多行选中
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('handleSelectionChange', val)
    },
    // 显示 表格操作弹窗
    showActionTableDialog() {
      this.$emit('handelAction')
    },
    doLayout() {
      this.$nextTick(() => { // 在数据加载完，重新渲染表格
        this.$refs[this.options.tableRef].doLayout()
      })
    }
  }
}
</script>
<style lang="scss" >
.color-box{
  display: flex;
  width: 24px;
  height: 24px;
}
</style>
